<template>
  <div class="menu-list" v-if="itemList.length !== 0">
    <div v-for="item in itemList" :key="item.id" class="menu-item">
      <div class="image"><img :src="item.image" /></div>
      <div class="info" @click="openPopup(item.id)">
        <h3 class="name">{{ item.name }}</h3>
        <p class="description">{{ item.description }}</p>
        <p class="price"><i>￥</i>{{ item.price }}</p>
      </div>
      <div class="btn" style="display: flex; align-items: center">
        <div class="add-btn">
          <van-icon name="plus" color="#fff" @click="addCart(item)" />
        </div>
      </div>
    </div>
    <menu-info
      :item-info="setmealInfo"
      :comment-list="commentList"
      :setmeal-dishList="setmealDishList"
      :is-popup-visible="setmealPopup"
      @close-popup="closePopup"
      @add-cart="addCart"
    />
    <div class="load-complete flex">已经到底啦</div>
  </div>
  <star-empty v-if="itemList.length === 0" />
</template>
<script setup lang="ts">
import menuInfo from './menu-info.vue'
import type { SetmealDishItem, SetmealItemResult } from '@/types/meal'
import type { BusinessItemResult } from '@/types/business'
import { ref } from 'vue'
import { addCartAPI } from '@/api/cart'
import { getSetmealDishAPI } from '@/api/meal'
import type { CommentItem } from '@/types/comment'
import * as commentAPI from '@/api/comment'
const props = defineProps<{
  itemList: SetmealItemResult[]
  business: BusinessItemResult
}>()
const emits = defineEmits<{
  (e: 'getCartList', businessId: number): void
}>()
// 套餐信息
const setmealInfo = ref({} as SetmealItemResult)
const setmealDishList = ref<SetmealDishItem[]>([])
// 套餐弹窗
const setmealPopup = ref(false)
// 评论列表
const commentList = ref<CommentItem[]>([])

// 获取评论列表
const getSetmealCommentList = async (setmealId: number) => {
  try {
    const res = await commentAPI.getCommentListAPI({
      pageQueryDTO: {
        page: 1,
        pageSize: 10,
      },
      setmealId,
    }) // 请根据实际情况传递参数
    commentList.value = res.data.records // 请根据实际返回数据结构修改
  } catch (error) {
    console.error('获取评论列表失败', error)
  }
}
// 打开套餐菜品列表弹窗
const openPopup = async (id: number) => {
  setmealPopup.value = true
  try {
    const { data } = await getSetmealDishAPI(id)
    setmealInfo.value = data
    setmealDishList.value = setmealInfo.value.setmealDishes
    getSetmealCommentList(id)
  } catch (error) {
    console.log(error)
  }
}
// 关闭套餐菜品列表弹窗
const closePopup = () => {
  setmealPopup.value = false
}
// 添加购物车
const addCart = async (item: SetmealItemResult) => {
  const params = {
    setmealId: item.id,
    businessId: props.business.id,
  }
  try {
    await addCartAPI(params)
    emits('getCartList', props.business.id)
    if (setmealPopup.value) closePopup()
  } catch (error) {
    console.log(error)
  }
}
import './menu.scss'
</script>
<style lang="scss" scoped>
:deep() {
  .van-nav-bar__arrow {
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #000;
    opacity: 0.6;
    color: #fff;
  }
}
</style>
